<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            padding: 6px ;
            border-bottom: 1px solid rgba(0, 0, 0, 0.197);
        }
    </style>
</head>
<body>
    <button id="websites-lists">获取网站列表</button>
    <button id="websites-insert">插入</button>
    <button id="websites-update">更新</button>
    <button id="websites-delete">删除</button>
    <button id="websites-jsonp">JSONP</button>
    <button id="websites-upload">上传</button>
    <button id="websites-proxy">代理</button>
    <br>
    <button id="websites-registary">注册</button>
    <button id="websites-login">登录</button>
    <input type="file" id='file'>
    <ul id="box">

    </ul>
    <script src="./static/jquery-3.5.1.js"></script>
    <script>
        const base = 'http://localhost:3000';
        
        const box = document.getElementById('box')
        const render = function(res){
            const lis = res.data.map(function(el) {
                const store = [];
                for(let key in el) {
                   store.push( `${key}:${el[key]}`)
                }
                return `<li>${store.join(';')}</li>`
            });
            box.innerHTML = lis.join('')
        }
        const fresh = function() {
            $.ajax({
                url: base + '/websites/lists',
                type:'GET',
                dataType: 'JSON',
                data: {
                    page: 1,
                    pageSize: 200
                }
            }).then(res => {
                render(res)
            })
        }
        $('#websites-lists').on('click', function() {
            fresh()
        }).click()
        $('#websites-insert').on('click', function() {
            $.ajax({
                url: base + '/websites/add',
                type:'POST',
                dataType: 'JSON',
                data: {
                    name:'日本',
                    url: 'china.org',
                    alexa: 909877,
                    country:'CN'
                }
            }).then(res => {
                console.log(res);
                fresh()
            })
        });
        $('#websites-update').on('click', function() {
            $.ajax({
                url: base + '/websites/update',
                type:'POST',
                dataType: 'JSON',
                data: {
                    id: 6,
                    name:'中国23232',
                    url: 'china.org',
                    alexa: 90,
                    country:'CN'
                }
            }).then(res => {
                console.log(res);
                fresh()
            })
        });
        $('#websites-delete').on('click', function() {
            $.ajax({
                url: base + '/websites/delete',
                type:'delete',
                dataType: 'JSON',
                data: {id: 64}
            }).then(res => {
                console.log(res);
                fresh()
            })
        });
        $('#websites-jsonp').on('click', function() {
            // $.ajax({
            //     url: base + '/websites/lists',
            //     type:'GET',
            //     dataType: 'JSONP',
            //     data: {
            //         page: 1,
            //         pageSize: 12
            //     }
            // }).then(res => {
            //     render(res)
            // })

            const script = document.createElement('script')
            script.src = base + '/websites/lists?callback=render';
            document.body.append(script)
            script.onload= function() {
                script.remove()
            }

        });

        $('#websites-upload').on('click', function() {
            const pic = $("#file")[0];
            console.dir(pic)
            let params = new FormData();
            
            params.append('name','pic')
            params.append('file', pic.files[0])
            console.log(params)
            $.ajax({
                contentType:false,
                processData: false,
                url: base + '/websites/upload',
                type:'POST',
                dataType: 'JSON',
                data: params
            }).then(res => {
                console.log(res);
                alert('上传成功')
            })
        });
        $('#websites-proxy').on('click', function() {
            const url3 =  base + `/api/interface/skanda/GetSubNew?cid=30101&page=1&size=17`
            $.ajax({
                type: "get",
                dataType: 'JSONP',
                url: url3,
                success: function(msg){
                    console.log(msg);
                }
            });
        });
        $('#websites-registary').on('click', function() {
            const url3 =  base + `/user/registary`
            $.ajax({
                type: "POST",
                dataType: 'JSON',
                url: url3,
                data: {
                    username:'goodman99',
                    password:'123456'
                },
                success: function(msg){
                    console.log(msg);
                }
            });
        });
        $('#websites-login').on('click', function() {
            const url3 =  base + `/user/login`
            $.ajax({
                type: "get",
                dataType: 'JSONP',
                url: url3,
                success: function(msg){
                    console.log(msg);
                    console.log()
                }
            });
        });
        
    </script>
</body>
</html>